'use strict';
import React from 'react';
import {Image, ImageBackground, StyleSheet, Text, TouchableOpacity, View} from 'react-native';
import {diffTime} from '../../util/Tool'
import Button from '../common/Button';
import Images from '../../asset';
import StatusCode from '../../config/StatusCode';
import ImageView from "../common/ImageView";
import ActionsManager from "../../config/manager/ActionsManager";
import ServicesApi from "../../config/ServicesApi";
import {inject, observer} from "mobx-react";
@inject('taskStore')
@observer
class CommonListRow extends React.Component {

    constructor(props) {
        super(props)
    }

    render() {
        const {dic_code} = this.props;
        if (dic_code === StatusCode.DIC_CODE_FOLLOW) { //关注
            return this._renderFollow();
        } else if (dic_code === StatusCode.DIC_CODE_VIDEO) { //视频
            return this._renderVideo();
        }else if (dic_code === StatusCode.DIC_CODE_LATEST) { //最新
            return this._renderNewestInformation();
        }
        else { //其他的栏目（和关注布局一样，但是取得字段不一样）
            return this._renderInformation();
        }
    }

    _renderFollow = () => {
        const width = SCREEN_WIDTH * 0.282;
        const height = width * 0.657;
        const {onPress, data_type, information_title, member_img, author_name, publish_time, cover_url} = this.props;
        const cover = data_type === 'local' ? `${ServicesApi.QI_NIU_LINK}${cover_url}` : `${ServicesApi.THIRD_LINK}${cover_url}`;
        return (

            <TouchableOpacity onPress={onPress}>
                <View style={[styles.content, {height}]}>
                    <View style={styles.itemInfoCon}>
                        <Text style={styles.titleText} numberOfLines={2}>{information_title}</Text>
                        <View style={styles.bottomInfo}>
                            <Text style={styles.itemTime}>{diffTime(publish_time)}</Text>
                            <Text style={styles.itemBottomName}>{author_name}</Text>
                        </View>
                    </View>
                    <ImageView
                        resizeMode={'cover'}
                        style={[styles.image, {width, height}]}
                        source={cover_url ? {uri: cover} : Images.img_shop_default}
                    />
                </View>
            </TouchableOpacity>
        )
    };

    _renderNewestInformation = () => {
        const width = SCREEN_WIDTH * 0.282;
        const height = width * 0.657;
        const {onPress,thumbnail,title,published_at,author} = this.props;
        const cover = thumbnail;
        return (
            <TouchableOpacity onPress={onPress}>
                <View style={[styles.content, {height}]}>
                    <View style={styles.itemInfoCon}>
                        <Text style={styles.titleText} numberOfLines={2}>{title}</Text>
                        <View style={styles.bottomInfo}>
                            <Text style={styles.itemTime}>{published_at}</Text>
                            <Text style={styles.itemBottomName}>{author}</Text>
                        </View>
                    </View>
                    <ImageView
                        style={[styles.image, {width, height}]}
                        source={cover ? {uri: cover} : Images.img_shop_default}
                        resizeMode={'cover'}
                    />
                </View>
            </TouchableOpacity>
        )
    };

    _renderInformation = () => {
        const width = SCREEN_WIDTH * 0.282;
        const height = width * 0.657;
        const {onPress, data_type, information_title, member_img, author_name, publish_time, cover_url, article_type} = this.props;
        const cover = data_type === 'local' ? `${ServicesApi.QI_NIU_LINK}${cover_url}` : `${ServicesApi.THIRD_LINK}${cover_url}`;
        return (
            <TouchableOpacity onPress={onPress}>
                <View style={[styles.content, {height}]}>
                    <View style={styles.itemInfoCon}>
                        <Text style={styles.titleText} numberOfLines={2}>{information_title}</Text>
                        <View style={styles.bottomInfo}>
                            <Text style={styles.itemTime}>{diffTime(publish_time)}</Text>
                            <Text style={styles.itemBottomName}>{author_name}</Text>
                        </View>
                    </View>
                    <View style={styles.itemPhotoView}>
                        <ImageView
                            style={[styles.image, {width, height}]}
                            source={cover_url ? {uri: cover} : Images.img_shop_default}
                            resizeMode={'cover'}
                        />
                        {article_type > 1 && <Image
                            tintColor={'#fff'}
                            source={Images.icon_video_play}
                            style={styles.iconPlayStyle}
                        />}
                    </View>
                </View>
            </TouchableOpacity>
        )
    };
    onPressComment = (information_id) => {
        RouterHelper.navigate('评论','CommentList',{topic_id:information_id,reply_module:'information'});
    };

    _onPressVideoShare = async () => {
        const {information_id,information_title,taskStore} = this.props;
        // console.log(`${ServicesApi.SHARE_VIDEO_URL}?id=${information_id}`);
        ActionsManager.showShareModule({
            type: 'link',
            title: information_title,
            text: information_title,
            url: ServicesApi.DOWNLOAD_HOST,
            imageUrl: ServicesApi.ICON_APP,
        });
        await taskStore.saveTask('news_share')
    };

    _renderVideo = () => {
        const {onPress, cover_url, author_name, publish_time, topic_counts, data_type, user_img,information_id} = this.props;
        const cover = data_type === 'local' ? `${ServicesApi.QI_NIU_LINK}${cover_url}` : `${ServicesApi.THIRD_LINK}${cover_url}`;
        // console.log('this.props---->', this.props);
        // return null;
        const height = SCREEN_WIDTH * 0.568;
        return (
            <TouchableOpacity
                style={styles.itemContainer}
                onPress={onPress}
            >
                <View style={styles.itemContainer}>
                    <ImageBackground
                        style={[styles.videoImage, {height}]}
                        source={cover_url ? {uri: cover} : Images.img_shop_default}
                    >
                        <ImageView
                            source={Images.icon_video_play}
                        />
                    </ImageBackground>
                    <View style={styles.bottomVideoInfo}>
                        <View style={styles.bottomLeftView}>
                            <View style={styles.bottomUserView}>
                                <ImageView
                                    style={styles.bottomUserImg}
                                    source={user_img ? {uri: user_img} : Images.icon_hot}
                                />
                                <Text style={styles.bottomUserText}>{author_name}</Text>
                            </View>
                            <View style={[styles.bottomUserView, {marginLeft: 10, paddingLeft: 10}]}>
                                <Text style={styles.bottomUserText}>{diffTime(publish_time)}</Text>
                            </View>
                        </View>
                        <View style={styles.bottomRightView}>
                            <TouchableOpacity onPress={() => this.onPressComment(information_id)}>
                                <View style={styles.bottomRightView}>
                                    <Text style={styles.bottomCommentCount}>{topic_counts || 0}</Text>
                                    <ImageView
                                        style={styles.bottomCommentIcon}
                                        source={Images.icon_comment_msg}
                                    />
                                </View>
                            </TouchableOpacity>
                            <TouchableOpacity onPress={this._onPressVideoShare}>
                                <ImageView
                                    style={styles.bottomShareIcon}
                                    source={Images.icon_video_share}
                                />
                            </TouchableOpacity>
                        </View>
                    </View>
                </View>
            </TouchableOpacity>
        )
    }
}

const styles = StyleSheet.create({
    itemContainer: {
        flexDirection: 'column',
        backgroundColor: '#fff',
        marginTop: 5,
    },
    content: {
        flexDirection: 'row',
        justifyContent: 'center',
        // backgroundColor: "#9f1f1f"
        marginHorizontal: 15,
        marginVertical: 10,
    },
    itemInfoCon: {
        flex: 1,
        marginTop: 5,
        marginRight: 40,
        justifyContent: 'space-between',
    },
    titleText: {
        fontSize: FontSize(14),
        color: "#4a4a4a",
    },
    bottomInfo: {
        justifyContent: 'space-between',
        flexDirection: 'row',
        alignItems: 'center',
    },
    itemTime: {
        fontSize: FontSize(12),
        color: "#929292"
    },

    itemBottomName: {
        fontSize: FontSize(12),
        color: "#929292",
        // height: 60,
    },
    videoName: {
        // width: 55,
        fontSize: FontSize(11),
        color: "#4a4a4a"
    },
    image: {
        borderRadius: 5,
        backgroundColor: '#eee',
    },
    bottomVideoInfo: {
        justifyContent: 'space-between',
        flexDirection: 'row',
        alignItems: 'center',
        paddingVertical: 12,
        marginHorizontal: 15,

    },
    videoImage: {
        width: Theme.screenWidth,
        opacity: 0.8,
        justifyContent: 'center',
        alignItems: 'center',
    },
    videoPlayIcon: {
        width: 60,
        height: 60,
    },
    user: {
        height: 28,
        borderRadius: 30,
        paddingLeft: 10,
        paddingRight: 10,
        backgroundColor: '#eeeeee',

    },
    userIconStyle: {
        width: 22,
        height: 22,
        borderRadius: 22 / 2,
        marginRight: 5,

    },
    videoTime: {
        fontSize: FontSize(11),
        color: "#4a4a4a",
        paddingTop: 5,
        paddingBottom: 5,
        paddingLeft: 10,
        paddingRight: 10,
        borderRadius: 30,
        marginLeft: 10,
        backgroundColor: '#eeeeee',
    },
    comment: {
        flexDirection: 'row',
        marginRight: 5,
    },
    commentText: {
        fontSize: FontSize(11),
        color: "#b0b0b0",
        marginRight: 5,
    },
    commentIconStyle: {
        width: 21,
        height: 21,
        marginRight: 15,
    },
    commentShareStyle: {
        width: 19,
        height: 19,
        marginRight: 15,
    },
    local: {
        flex: 1,
        flexDirection: 'row',
    },

    //bottom
    bottomLeftView: {
        flexDirection: 'row',
        alignItems: 'center',
    },
    bottomUserView: {
        height: 26,
        borderRadius: 14,
        backgroundColor: "#eeeeee",
        paddingLeft: 3,
        paddingRight: 10,
        paddingVertical: 3,
        flexDirection: 'row',
        alignItems: 'center',
    },
    bottomUserImg: {
        width: 20,
        height: 20,
        borderRadius: 10,
    },
    bottomUserText: {
        fontSize: FontSize(13),
        color: "#4a4a4a",
        marginLeft: 5,
    },
    bottomRightView: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',
    },
    bottomCommentCount: {
        fontSize: FontSize(13),
        color: "#b0b0b0",
    },
    bottomCommentIcon: {
        width: 15,
        height: 15,
        marginLeft: 5,
    },
    bottomShareIcon: {
        width: 15,
        height: 15,
        marginLeft: 15,
    },

    itemPhotoView: {
        alignItems: 'center',
    },
    iconPlayStyle: {
        top: '50%',
        width: 40,
        height: 40,
        marginTop: -20,
        tintColor: '#fff',
        position: 'absolute',
    },
});

export default CommonListRow